<template>
	<view>
		<mine-navbar></mine-navbar>
		<view v-if="isLogin">
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" style="padding-top: 30rpx;">
				<view class="u-m-r-10">
					<u-avatar :src="loginUserInfo.avatar" size="140"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-20">{{loginUserInfo.username}}</view>
					<view class="u-font-14 u-tips-color">学号：{{loginUserInfo.userId}}</view>
					<view class="u-font-14 u-tips-color">学校：{{loginUserInfo.university}}</view>
					<view class="u-font-14 u-tips-color" style="display: flex;justify-content: center;align-items: center;">
						简介：
						<u-input :border="true" placeholder="请输入活动名称" v-model="loginUserInfo.userinfo" type="text"></u-input>
						<u-button style="margin-left: 10rpx;" :loading="reloadUserinfoLoading" @click="reloadUserinfo" shape="square" size="mini" :ripple="true" type="default">
							更新简介
						</u-button>
					</view>
				</view>
			</view>

			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item @click="toMyClub" icon="rmb-circle" title="我的社团"></u-cell-item>
					<u-cell-item @click="toMyActivity" icon="rmb-circle" title="我的活动"></u-cell-item>
				</u-cell-group>
			</view>

			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item @click="toMyClubManage" icon="star" title="管理社团"></u-cell-item>
				</u-cell-group>
			</view>

			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item @click="logout" icon="setting" title="退出登录"></u-cell-item>
				</u-cell-group>
			</view>

		</view>
		<view v-else style="background-color: #FFFFFF;">
			<view :style="{height:height+'px'}" style="background-color: #FFFFFF;width: 100%;padding: 40rpx;">
				<view class="content">
					<view style="text-align: center;font-size: 48rpx;font-weight: 900;">欢迎登录</view>
					<view style="margin-top: 80rpx;">
						<input class="u-border-bottom" style="margin-top: 40rpx;" type="text" v-model="userId"
							placeholder="请输入学号" />
						<input class="u-border-bottom" style="margin-top: 40rpx;" type="password" v-model="pwd"
							placeholder="请输入密码" />
					</view>
					<view style="margin-top: 40rpx;">
						<view style="margin: 10rpx 0 20rpx 0;display: flex;justify-content: space-between;color: #555555;">
							<view class="pwd" @click="toRegister">用户注册</view>
							<!-- <view class="issue">忘记密码</view> -->
						</view>
						<u-button @click="doLogin" :loading="dologinButtonLoading" shape="square" size="default" :ripple="true"
							type="warning">登录</u-button>
					</view>
				</view>
				<u-top-tips ref="uTips"></u-top-tips>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import mineNavbar from "../../components/mine/mine-navbar.vue";
	export default {
		computed: mapState(['isLogin', 'loginUserInfo']),
		components: {
			mineNavbar
		},
		data() {
			return {
				pic: 'https://uviewui.com/common/logo.png',
				show: true,
				loginButtonLoading: false,
				reloadUserinfoLoading:false,
				
				
				// 登录部分
				dologinButtonLoading: false,
				userId: "",
				pwd: "",
				height: this.swiperHeight + 8,
			}
		},
		// onShow() {
		// 	if(!this.isLogin){
		// 		uni.navigateTo({
		// 			url: '/pages/login/login'
		// 		});
		// 	}
		// },
		methods: {
			...mapMutations(['login', 'logout']),
			//登录操作
			doLogin() {
				this.dologinButtonLoading = true
				console.log(this.userId)
				console.log(this.pwd)
				var that = this
				var user = {
					userId: that.userId,
					pwd: that.pwd
				}
				console.log(user)
				//先请求数据库，再存储
				uni.request({
					url: that.url.user.login,
					method: 'POST',
					data: JSON.stringify(user),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						console.log(res)
						if (res.data.msg == "success") {
							that.login(res.data.user)
							// this.setStorage("user",)
							that.user = res.data.user
							console.log(that.loginUserInfo)
							// 实现跳转到主页
							uni.switchTab({
								url: '/pages/index/index'
							});
						} else {
							that.showTips(3000, res.data.msg, "error")
							console.log(res.data.msg);
							that.pwd = ""
						}
			
					},
					fail: (res) => {
						that.showTips(3000, res.data.msg, "error")
						console.log(res)
					}
				});
				this.dologinButtonLoading = false
			},
			showTips(duration, title, type) {
				this.$refs.uTips.show({
					duration: duration,
					title: title,
					type: type
				});
			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			},
			
			//去管理页面操作
			toMyClub(){
				uni.navigateTo({
					url: '/pages/mine/my-club/my-club'
				});
			},
			toMyActivity(){
				uni.navigateTo({
					url: '/pages/mine/my-activity/my-activity'
				});
			},
			toMyClubManage(){
				uni.navigateTo({
					url: '/pages/mine/my-club-manage/my-club-manage'
				});
			},
			reloadUserinfo(){
				this.reloadUserinfoLoading = true;
				uni.request({
					url: this.url.user.update,
					method: 'POST',
					data: JSON.stringify(this.loginUserInfo),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						console.log(res)
						if (res.data.msg == "success") {
							this.doRegisterButtonLoading = false
							this.reloadUserinfoLoading = false;
						}else{
							this.showTips(3000, res.data.msg, "error")
						}
					},
					fail: (res) => {
						console.log("失败！")
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
	
	.wrap {
		font-size: 28rpx;
	
		.content {
			width: 600rpx;
			margin: 80rpx auto 0;
	
			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}
	
			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}
	
			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}
	
			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;
	
				&::after {
					border: none;
				}
			}
	
			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}
	
		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;
	
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}
	
			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;
	
				.link {
					color: $u-type-warning;
				}
			}
		}
	}
</style>
